<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/lib/bootstrap/js/bootstrap.js}"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/user.css}">
    <script th:src="@{/js/jqPaginator.js}"></script>
    <title>倪风 - 用户中心</title>
</head>
<body>
<div th:replace="index/command :: nav"></div>

<div class="main container">
    <div th:replace="index/user/index :: left"></div>
    <div class="col-md-10 col-sm-9 col-xs-9">
        <div class="i-content">
            <div class="title" style="margin-bottom:20px;"> 修改密码</div>
            <form class="form-horizontal" style="width: 70%;">
                <div class="form-group">
                    <span for="name" class="col-sm-2 control-label">密码</span>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" placeholder="输入6-18位密码">
                    </div>
                </div>
                <div class="form-group">
                    <span for="rePwd" class="col-sm-2 control-label">确认密码</span>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="rePwd" placeholder="确认密码">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <a type="button" href="#" class="goChange" style="margin: 0;" onclick="changePwd()">修改密码</a>
                    </div>
                </div>


            </form>
        </div>
    </div>
</div>
<div th:replace="index/command :: footer"></div>
<script>
    $(".user-left").each(function (index) {
        if ($(this).text().trim()=="修改密码"){
            $(this).addClass("hover")
        }
    })

    function changePwd() {
        var password = $("#password").val();
        var rePwd = $("#rePwd").val();
        if (password==null){
            layer.alert("请输入密码");
            return;
        }else if (password.length<6||password.length>18){
            layer.alert("请按要求输入6-18位密码")
            return;
        }else if (rePwd==null){
            layer.alert("请输入确认密码")
            return;
        }else if (password!=rePwd){
            layer.alert("两次密码输入不一致");
            return;
        }
        $.post("/user/changePwd",{
            "id": [[${user.id}]],
            "password":password
        },function (result) {
            if (result){
                layer.alert("修改成功")
            }else if (result==false){
                layer.alert("修改失败")
            }
        })

    }
</script>
</body>
</html>